import React from 'react';
import { observer, inject } from 'mobx-react';
import {WeaTools, WeaErrorPage, WeaTab, WeaLocaleProvider, WeaHelpfulTip} from 'ecCom';
import { Button } from 'antd';
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import Condition from './Condition';
import {toJS} from "mobx";
const getLabel = WeaLocaleProvider.getLabel;

@inject("wfQueryResultStore")
@observer
class QueryList extends React.Component{
    constructor(){
        super();
    }
    componentDidMount(){
        if(this.props.needInit){
            this.doInit(this.props);
        }
    }
    componentWillReceiveProps(nextProps){
        const { needInit,_key } = this.props;
        const _keyNext = nextProps._key;
        if(needInit && _keyNext !== _key)
            this.doInit(nextProps);
    }
    doInit(props){
        const { wfQueryResultStore } = props;
        wfQueryResultStore.resetAllStatus();
        wfQueryResultStore.setUrlParams({needTree:"false"});
        wfQueryResultStore.doInit();
        wfQueryResultStore.doSearch();
    }
    setShowSearchAd= bool=>{this.props.wfQueryResultStore.setShowSearchAd(bool)};
    hideSearchAd= ()=>this.props.wfQueryResultStore.setShowSearchAd(false);
    tabChange = (tabKey) =>{this.props.wfQueryResultStore.switchTab(tabKey)};
    render(){
        const { wfQueryResultStore } = this.props;
        const { viewcondition,topTab,tableStore,fixedForm,showSearchAd,hasScrollX } = wfQueryResultStore;
        const fixedFormParams = fixedForm.getFormParams() || {};
        let tableProps = {};
        if(hasScrollX){
            tableProps["tableWidth"] = (columns)=>{
                const columnLength = columns.filter((col)=>col.display === 'true').length;
                return columnLength*160;
            };
        }
        return (
            <div style={{height: '100%'}}>
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@omck4m`}
                    buttonsAd={this.getAdButtons()}
                    searchType={['base','advanced']}
                    searchsBaseValue={fixedFormParams.requestname}
                    setShowSearchAd={this.setShowSearchAd}
                    hideSearchAd={this.hideSearchAd}
                    searchsAd={
                        <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@m3x9ns`} queryStore={wfQueryResultStore} onEnterSearch={this.onEnterSearch} />
                    }
                    showSearchAd={showSearchAd}
                    onSearch={this.doSearch}
                    onSearchChange={v=>{wfQueryResultStore.appendFixedFormFields({requestname:{value:v}})}}
                    keyParam="viewcondition"
                    datas={topTab}
                    selectedKey={viewcondition}
                    onChange={this.tabChange}
                />
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@i3x0ma`}
                    {...tableProps}
                    comsWeaTableStore={tableStore}
                    rowKey={this.getRowKeys}
                    register_table={wfQueryResultStore.reLoad}
                    hasOrder={true}
                    needScroll={true}
                    uniqueId={true}
                    getColumns={this.getColumns}
                />
            </div>
        )
    }

    onEnterSearch = () =>{
        const { wfQueryResultStore } = this.props;
        wfQueryResultStore.doSearch();
    }

    getRowKeys = (record,index)=>{
        return `${record.requestid}_${record.userid||""}`;
    }

    getAdButtons() {
        const { wfQueryResultStore } = this.props;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ln5nrt@search`} type="primary" onClick={this.doSearch}>{getLabel(197,'搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c902dn@reset`} type="ghost" onClick={this.reset}>{getLabel(2022,'重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@twxidd@cancel`} type="ghost" onClick={this.cancel}>{getLabel(31129,'取消')}</Button>)
        ];
    }

    doSearch = ()=>{this.props.wfQueryResultStore.doSearch()};
    reset = ()=>{this.props.wfQueryResultStore.resetCondition()};
    cancel = ()=>{this.props.wfQueryResultStore.setShowSearchAd(false)};
    getColumns = (columns) => {
        const columnsJS = toJS(columns);
        columnsJS.forEach(col => {
            if(col.dataIndex === "unoperators"){
                const title = (
                    <span>
                        <span title={col.title}>
                            { col.title }
                        </span>
                        {<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@mytxn6@${col.dataIndex}`} style={{ marginLeft: 5 }} title={getLabel(516719,"可在【个性化设置】中设置未操作者的显示类型")} placement="top" />}
                    </span>
            )
                col.title = title;
            }
        });
        return columnsJS;
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@997940`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(QueryList);